<template>
	<view class="detail" style="padding:20rpx;">
		<view style="padding-bottom: 100rpx;">
			<view class="bg-white">
				<view class="section">

					<list-cell :hover="false">
						<view class="w-100 d-flex align-items-center">
							<view class="d-flex flex-column w-60">
								<view class="w-100 font-size-lg text-color-base text-truncate mb-10 w-60"
									v-if="isFriend">
									{{ order.orderAddress }}
								</view>
								<view class="w-100 font-size-lg text-color-base text-truncate mb-10" v-else>
									{{ computedTxt }}
									
								</view>
								<view class="w-100 d-flex align-items-center overflow-hidden">
									<view class="text-truncate font-size-sm text-color-assist"></view>
								</view>
							</view>
							<view class="d-flex justify-content-end align-items-center w-40">
								<image src="/static/images/order/location.png" class="flex-shrink-0"
									style="width: 30rpx; height: 30rpx;"></image>
							</view>
						</view>
					</list-cell>

					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column position-relative" style="margin-bottom: -40rpx;">
							<view class="w-100 d-flex align-items-center mb-40"
								v-for="(good, index) in order.orderDetaileds" :key="index">
								<view class="d-flex flex-column w-60 overflow-hidden">
									<view class="font-size-lg text-color-base mb-10 text-truncate">
										{{ good.goodsVo.goodsName }}
									</view>
									<view class="font-size-sm text-color-assist text-truncate">{{ good.orderDesc }}
									</view>
								</view>
								<view class="d-flex w-40 align-items-center justify-content-between pl-30">
									<view class="font-size-base text-color-base">x{{ good.orderGoodsNumber }}</view>
									<view class="font-size-base text-color-base font-weight-bold">
										￥{{ good.orderDetailedPrice }}</view>
								</view>
							</view>
						</view>
					</list-cell>

				</view>

				<view class="section">
					<!-- payment and amount begin -->
					<list-cell :hover="false" padding="50rpx 30rpx">
						<view class="w-100 d-flex flex-column">
							<view class="pay-cell">
								<view>支付方式</view>
								<view class="font-weight-bold">微信支付</view>
							</view>
							<view class="pay-cell">
								<view>金额总计</view>
								<view class="font-weight-bold">￥{{price}}</view>
							</view>
						</view>
					</list-cell>
					<!-- payment and amount end -->
				</view>
			</view>

			<view class="section">
				<!-- order info begin -->
				<list-cell :hover="false" padding="50rpx 30rpx">
					<view class="w-100 d-flex flex-column">
						<view class="pay-cell">
							<view>下单时间</view>
							<view class="font-weight-bold">{{ order.orderCreateTime }}</view>
						</view>
						<view class="pay-cell">
							<view>下单门店</view>
							<view class="font-weight-bold">茶坊小舍</view>
						</view>
						<view class="pay-cell">
							<view>订单号</view>
							<view class="font-weight-bold">{{ order.orderNumber }}</view>
						</view>
					</view>
				</list-cell>
				<!-- order info end -->
			</view>
		</view>



		<view class="btn-box" v-if="order.orderState===1">
			<view class="item" v-if="isFriend"><button type="primary" open-type="share">好友代付</button></view>
			<view class="item"><button type="primary" @click="pay">支付</button></view>
		</view>
		<view class="btn-box" v-if="order.orderState===0 && isFriend">
			<view class="item"><button type="primary" @click="refund">申请退款</button></view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,mapGetters
	} from "vuex";
	export default {

		components: {

		},
		data() {
			return {
				orderNumber: "",
				order: "",
				price: "",
				isFriend: false,
				payData: ""
			};
		},
		onLoad({
			orderNumber,
			isFriend
		}) {
			if (isFriend === "false") {
				this.isFriend = false
			} else {
				this.isFriend = true
			}

			this.orderNumber = orderNumber
			
		},
		onShow(){
			this.getOrderList()
		},
		computed: {
			...mapState(["openid"]),
			...mapGetters(["isLogin"]),
			computedTxt() {
				return this.order.orderAddress.substring(0, 5) + "....."
			}
		},
		mounted() {
			this.isUserState()
		},
		onShareAppMessage(res) {
			if (res.from === "button") {
				// 来自页面内分享按钮
				console.log(res.target);
			}
			return {
				title: "嗨,在吗!",
				path: "/pages/orders/detail?isFriend=false&orderNumber=" + this.orderNumber,
			};
		},

		methods: {
			isUserState() {
			  if (!this.isLogin) {
			     this.login();
			   
			  }
			  return;
			},
			login() {
			  uni.navigateTo({
			    url: "/pages/login/login",
			  });
			},
			getOrderList() {
				let opt = {
					url: "/order/getOrder",
					method: "get",
				}
				let param = {
					orderNumber: this.orderNumber
				}
				this.$req.httpRequest(opt, param).then(res => {
					if (res.data.code === 200) {
						this.order = res.data.data
						// console.log(this.order)
						this.getCartGoodsPrice();
					}
				})
			},
			getCartGoodsPrice() { //计算购物车总价
				this.price = this.order.orderDetaileds.reduce((acc, cur) => acc + cur.orderDetailedPrice, 0)
			},
			isPayState() {
				this.isUserState()
				let opt = {
					url: "/pay/postPay",
					method: "post",
				};
				let param = {
					orderNumber: this.orderNumber,
					openid: this.openid
				};
				this.$req.httpRequest(opt, param).then(res => {
					if (res.data.code != 200) {
						uni.showModal({
							content: res.data.msg,
							showCancel: false,
							success() {
								// uni.na
							}
						})
						return
					} else {

						let _this = this
						// let _uni = uni
						wx.requestPayment({
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package: res.data.data.package,
							signType: 'RSA',
							paySign: res.data.data.paySign,
							success(ress) {
								// console.log(ress)

								// uni.navigateTo({
								// 	url: '/pages/mine/mine'
								// })
								uni.switchTab({
									url: "/pages/mine/mine"
								})

							},
							fail(error) {
								console.log(error)
							}
						})
					}
				})
			},
			pay() {
				this.isPayState();
			},
			refund() {
				let opt = {
					url: "/order/applyForRefund",
					method: "post",
				};
				let param = {
					orderNumber: this.orderNumber
				};
				this.$req.httpRequest(opt, param).then(res => {
					if (res.data.code != 200) {
						uni.showModal({
							content: res.data.msg,
							showCancel: false,
							success() {

							}
						})
						return
					} else {
						console.log(res)
						uni.showModal({
							content: res.data.msg,
							showCancel: false,
							success() {
								uni.navigateTo({
									url: "/pages/orders/orders"
								})
							}
						})
					}
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detail {
		@mixin arch {
			content: "";
			position: absolute;
			background-color: $bg-color;
			width: 30rpx;
			height: 30rpx;
			bottom: -15rpx;
			z-index: 10;
			border-radius: 100%;
		}

		.section {
			position: relative;

			&::before {
				@include arch;
				left: -15rpx;
			}

			&::after {
				@include arch;
				right: -15rpx;
			}
		}

		.pay-cell {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: $font-size-base;
			color: $text-color-base;
			margin-bottom: 40rpx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}
		}

		.invote-box {
			position: absolute;
			width: 100%;
			left: 0;
			top: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}

		.btn-box {
			background-color: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.1);
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			z-index: 11;

			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 10rpx;
				flex: 1;
				flex-shrink: 0;

				button {
					width: 100%;
					border-radius: 50rem !important;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0;
				}
			}
		}
	}
</style>
